<template lang="html">
  <div class="checkIn" v-if="checkData">
    <div class="head">
      <div class="head-tips" @click="isShowMaskTips = true">
        <img src="/static/new/jey/sign_head_icon_help@2x.png"> 签到规则
      </div>
      <div class="mask" v-if="isShowMaskTips || isShowMaskSuccess">
        <div class="mask-bg"></div>
        <div  :class="isShowMaskSuccess?'mask-pop mask-pop-success':'mask-pop'">
          <div v-if="isShowMaskSuccess">
            <div class="mask-content">
              <div class="checkin-success">
                <div class="checkin-success-title">签到成功</div>
                <div class="checkin-success-subtitle">恭喜您获得100积分</div>
              </div>
              <div class="mask-btn" @click="isShowMaskSuccess = false">
                我知道了
              </div>
          </div>
          </div>
          <div v-else>
            <div class="mask-title">
              签到规则
            </div>
            <div class="mask-content" v-html="checkData.user_rules">

            </div>
            <div class="mask-btn" @click="isShowMaskTips = false">
              我知道了
            </div>
          </div>

        </div>
      </div>
      <div class="head-content">
        <div class="head-content-check" v-if="!isCheck" @click="clickCheckin()">
          <div class="head-text">
            点我签到
          </div>
          <div class="head-num">
            +100积分
          </div>
        </div>
        <div class="head-content-uncheck" v-else>
          已签到
        </div>
      </div>
      <div class="head-group">
        <div class="head-group-item">
          <div class="head-item-name">
            我的积分
          </div>
          <div class="head-item-value">
            {{ checkData.user_score }}
          </div>
        </div>
        <div class="head-group-item">
          <div class="head-item-name">
            签到天数
          </div>
          <div class="head-item-value">
            {{ checkData.user_sign_count }}
          </div>
        </div>
      </div>
    </div>

    <div class="checkin-date">
      <div class="date-title">
        签到获得积分，累积领取礼包
      </div>
      <div class="date-lines">
        <div class="date-texts">
          <ul>
            <li v-for="(i, index) in dateLines" :class="i.status?'active':''">{{ i.date }}</li>
          </ul>
        </div>
        <div class="date-steps">
          <ul>
            <li v-for="(i, index) in dateLines">
              <img v-if="i.status" src="/static/new/jey/sign__icon_yes@2x.png" alt="">
              <img v-else src="/static/new/jey/sign__icon_no@2x.png" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="goods-list">
      <div class="glist-head">
        <div class="glist-head-left">
          <img src="/static/new/jey/sign__icon_gift@2x.png">签到兑好礼
        </div>
        <router-link class="glist-head-more" :to="{ path: '/new/checkin/record' }">
          兑换记录<img src="/static/new/jey/my_icon_aw@2x.png">
        </router-link>
      </div>
      <ul v-if="classifyList && classifyList.length > 0">
        <li v-for="i in classifyList">
          <div class="goods-pic" @click="routeTo('/goodslist_detail?id='+i.id)">
            <img class="max" :src="i.photo">
          </div>
          <div class="goods-info">
            <div class="goods-title">
              {{ i.nickname }}
            </div>
            <div class="goods-price">
              <img src="/static/new/jey/sign__icon_integral@2x.png" alt="">{{ i.discount_price }}
              <span class="goods-old-pirce">￥{{ i.selling_price }}</span>
            </div>
            <div @click="routeTo('/goodslist_detail?id='+i.id)" v-if="checkData.user_score >= i.discount_price" class="goods-btn">
              立即兑换
            </div>
            <div v-else class="goods-btn goods-btn-unclick">
              立即兑换
            </div>
          </div>
        </li>
      </ul>
      <div v-else class="no-data">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import { getUsersignGet, getUsersignPost, getGoodsList } from '@/api/checkin'
import axios from 'axios'
import { Toast } from "mint-ui";
export default {
  created() {
    document.title = '会员签到中心'
  },
  data() {
    return {
      isCheck: false,
      isShowMaskTips: false,
      isShowMaskSuccess: false,
      dateActive: 2,
      dateLines:[],
      checkData: null,
      today: null,
      classifyList: null,
    }
  },
  created() {
    this.getUsersign()
    this.getGoodsList()
  },
  methods: {
    // 获取信息
    getUsersign() {
      getUsersignGet({uid: this.getUserInfo().id}).then(res=>{
        console.log(res)
        if(res.code == 1){
          Toast(res.msg);

          setTimeout(() =>{
            this.$router.push('/my')
          }, 1500)
        }else{
          this.checkData = res.data;
          this.dateLines = [];
          for (var idx in this.checkData.is_sign_list) {
            for (var listIdx in this.checkData.is_sign_list[idx]) {
              // 判断返回的日期，今天是否已签到
              var date = new Date();
              this.today = date.getFullYear()+'-'+(date.getMonth() + 1)+ '-'+ date.getDate();
              if(new Date(listIdx).getTime() == new Date(this.today).getTime()){
                this.checkData.is_sign_list[idx][listIdx]?this.isCheck = true : this.isCheck = false
              }

              this.dateLines.push({
                date: listIdx.substring(5),
                status: this.checkData.is_sign_list[idx][listIdx]
              })
            }
          }
        }
      })
    },
    // 点击签到
    clickCheckin() {
        getUsersignPost({uid: this.getUserInfo().id}).then(res=>{
          console.log(res)
          if(res.code == 0){
            this.isShowMaskSuccess = true;
            this.isCheck = true;
            this.getUsersign();
          }else{
            Toast(res.msg)
          }
        })
    },
    // 获取兑换好礼 商品列表
    getGoodsList() {
      getGoodsList({
        goods_class: 10,
        uid: this.getUserInfo().id
      }).then(res=>{
        console.log(res)
        this.classifyList = res.data;
      })
    },
    // 获取时间戳
    getFormatDate() {
    	var date = new Date();
    	var seperator = "-";
    	var year = date.getFullYear();
    	var month = date.getMonth() + 1;
    	var nowDate = date.getDate();
    	if(month >=1 && month <=9) {
    		month = "0" + month;
    	}
    	if(nowDate >=0 && nowDate <=9) {
    		nowDate = "0" + nowDate;
    	}
    	var newDate = year + seperator + month + seperator + nowDate;
    	return newDate;
    }
  }
}
</script>

<style lang="scss" scoped>
  $mainColor: #FE5C83;
  .checkIn{
    .head{
      height: 7.4rem;
      width: 100%;
      padding: .5rem;
      background: url('/static/new/jey/sign_head_img_bg@2x.png') center center no-repeat;
      background-size: 100% 100%;
      position: relative;
      .head-tips{

        color: #fff;
        text-align: right;
        img{
          width: .6rem;
          height: .6rem;
          vertical-align: middle;
          margin-top: -2px;
        }
      }
      .head-content{
        margin-top: .86rem;
        .head-content-check{
          margin: 0 auto;
          width: 2.8rem;
          height: 2.8rem;
          border-radius: 50%;
          text-align: center;
          padding: .4rem 0;
          color: $mainColor;
          .head-text{
            font-size: .42rem;
            border-bottom: 1px solid #FDEAF2;
            display: inline-block;
            padding-bottom: .12rem;
            margin-bottom: .16rem;
          }
          .head-num{
            font-size: .34rem;
          }
        }
        .head-content-uncheck{
          color: #999999;
          text-align: center;
          margin-top: .86rem;
          font-size: .44rem;
          height: 2rem;
          margin-top: 1.6rem;
        }
      }
      .head-group{
        margin-top: .5rem;
        overflow: hidden;
        .head-group-item{
          text-align: center;
          color: #fff;
          float: left;
          width: 40%;
          .head-item-value{
            font-size: .8rem;
            margin-top: .08rem;
          }
        }
        .head-group-item:nth-child(2){
          margin-left: 20%;
        }
      }
    }
    .mask{
      .mask-bg{
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
      }
      .mask-pop{
        position: fixed;
        z-index: 3;
        top: 2rem;
        left: 50%;
        margin-left: -40%;
        height: 10rem;
        width: 80%;
        padding: .5rem 1rem;
        background: url('/static/new/jey/rules_img_bg@2x.png') center center no-repeat;
        background-size: 100% 100%;
        .mask-title{
          font-size: .8rem;
          margin-top: .8rem;
          position: relative;
          margin-bottom: .8rem;
          &::before{
            position: absolute;
            content: "";
            width: .5rem;
            height: 4px;
            background-color: #FB93A9;
            bottom: -6px;
            left: 0;
          }
        }
        .mask-content{
          min-height: 3.6rem;
          p{
            margin-bottom: .4rem;
            font-size: .36rem;
            color: #666666;
          }
        }
        .mask-btn{
          background: -webkit-linear-gradient(#FE5C83, #FDB0C0);
          background: linear-gradient(#FE5C83, #FDB0C0);
          width: 60%;
          line-height: 1rem;
          margin: 0 auto;
          margin-top: 1.1rem;
          color: #fff;
          text-align: center;
          border-radius: 1rem;
        }
      }
      .mask-pop.mask-pop-success{
        background: url('/static/new/jey/successful_img_bg@2x.png') center center no-repeat;
        background-size: 100% 100%;
        .checkin-success{
          margin-top: 5.2rem;
          text-align: center;
          .checkin-success-title{
            color: $mainColor;
            font-size: .6rem;
            margin-bottom: .2rem;
          }
          .checkin-success-subtitle{
            color: #777;
            font-size: .36rem;
          }
        }
      }
    }

    .checkin-date{
      border-radius: .4rem .4rem 0 0;
      width: 100%;
      height: 4rem;
      background-color: #fff;
      margin-top: -.3rem;
      position: relative;
      z-index: 1;
      .date-title{
        text-align: center;
        padding: .6rem 0;
        font-size: .44rem;
      }
      .date-texts{
        ul{
          display: flex;
          li{
            flex: 1;
            text-align: center;
            color: #999999;
          }
          li.active{
            color: $mainColor;
          }
        }
      }
      .date-steps{
        ul{
          position: relative;
          display: flex;
          margin-top: .1rem;
          li{
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
            img{
              width: .7rem;
              height: .7rem;
              vertical-align: middle;
            }
          }
          &::before{
            position: absolute;
            content: "";
            width: 86%;
            height: 4px;
            background-color: $mainColor;
            top: 50%;
            left: 8%;
            margin-top: -2px;
          }
        }
      }
    }

    .goods-list{
      margin-top: .4rem;
      background-color: #fff;
      padding-bottom: .6rem;
      .glist-head{
        padding: .4rem 0;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        margin: 0 .4rem;
        .glist-head-left{
          float: left;
          font-size: .42rem;
          img{
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
            margin-top: -4px;
            margin-right: 4px;
          }
        }
        .glist-head-more{
          float: right;
          font-size: .38rem;
          color: #999;
          img{
            width: .7rem;
            height: .7rem;
            vertical-align: middle;
            margin-top: -4px;
          }
        }
      }
      ul>li{
        overflow: hidden;
        box-shadow: 0px 2px 12px rgba(0,0,0,.1);
        margin: .4rem;
        border-radius: 10px;
        padding: .4rem;
        .goods-pic{
          float: left;
          width: 28%;
        }
        .goods-info{
          float: right;
          width: 70%;
          margin-left: 2%;
          .goods-title{
            font-size: .42rem;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .goods-price{
            color: $mainColor;
            margin: .2rem 0;
            font-size: .4rem;
            img{
              width: .4rem;
              height: .3rem;
              margin-right: .1rem;
              vertical-align: middle;
              margin-top: -4px;
            }
            .goods-old-pirce{
              color: #999;
              text-decoration: line-through;
              font-size: .36rem;
            }
          }
          .goods-btn{
            background: -webkit-linear-gradient(#FDB0C0, #FE5C83);
            background: linear-gradient(#FDB0C0, #FE5C83);
            width: 2.4rem;
            line-height: .7rem;
            float: right;
            color: #fff;
            text-align: center;
            border-radius: 1rem;
          }
          .goods-btn.goods-btn-unclick{
            background: #DCDCDC;
          }
        }
      }
    }
  }
  .no-data{
    text-align: center;
    line-height: 2rem;
    color: #888;
  }
</style>
